<template>
  <el-container>
    <el-main>
      <el-row :gutter="15">
        <el-col :span="8" :offset="0">
          <el-row :gutter="15">
            <!-- 合同总数 -->
            <el-col :span="12" :offset="0">
              <el-card shadow="never" class="statistic-totalcontract">
                <el-row :gutter="0">
                  <el-col :span="12" :offset="0" class="static-col">
                    <el-statistic :value="totalContract">
                      <template #title>
                        <div style="display: inline-flex; align-items: center">合同总数</div>
                      </template>
                    </el-statistic>
                  </el-col>
                  <el-col :span="12" :offset="0" class="image-col">
                    <el-image src="/src/assets/images/totalcontract.png" />
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <!-- 合同签订率 -->
            <el-col :span="12" :offset="0">
              <el-card shadow="never" class="statistic-contractsigning">
                <el-row :gutter="0">
                  <el-col :span="12" :offset="0">
                    <el-statistic :value="contractRato" suffix="%">
                      <template #title>
                        <div style="display: inline-flex; align-items: center">合同签订率</div>
                      </template>
                    </el-statistic>
                    <div class="statistic-footer">
                      <div class="footer-item">
                        <span>昨日新增</span>
                        <span class="red">
                          24%
                          <el-icon>
                            <CaretTop />
                          </el-icon>
                        </span>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12" :offset="0" class="image-col">
                    <el-image src="/src/assets/images/contractsigning.png" />
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <!-- 系统内人员总数 -->
            <el-col :span="12" :offset="0">
              <el-card shadow="never" class="statistic-totalworker">
                <el-row :gutter="0">
                  <el-col :span="12" :offset="0" class="static-col">
                    <el-statistic :value="totalWorker">
                      <template #title>
                        <div style="display: inline-flex; align-items: center">系统内人员总数</div>
                      </template>
                    </el-statistic>
                  </el-col>
                  <el-col :span="12" :offset="0" class="image-col">
                    <el-image src="/src/assets/images/totalworker.png" />
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <!-- 合同到期数 -->
            <el-col :span="12" :offset="0">
              <el-card shadow="never" class="statistic-contractexpiry">
                <el-row :gutter="0">
                  <el-col :span="12" :offset="0" class="static-col">
                    <el-statistic :value="totalContractExpiry">
                      <template #title>
                        <div style="display: inline-flex; align-items: center">合同到期数</div>
                      </template>
                    </el-statistic>
                  </el-col>
                  <el-col :span="12" :offset="0" class="image-col">
                    <el-image src="/src/assets/images/contractexpiry.png" />
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16" :offset="0">
          <el-row :gutter="15">
            <el-col :span="12" :offset="0">
              <el-card shadow="never">
                <div id="wageChart" style="height: 220px; width: 100%" />
                <!-- card body -->
              </el-card>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-card shadow="never">
                <div id="contractStatisticChart" style="height: 220px; width: 100%" />
                <!-- card body -->
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8" :offset="0">
          <el-card shadow="never">
            <div id="contractTypeChart" style="height: 400px; width: 100%" />
            <!-- card body -->
          </el-card>
        </el-col>
        <el-col :span="16" :offset="0">
          <el-card shadow="never">
            <div id="contractChart" style="height: 400px; width: 100%" />
            <!-- card body -->
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";

const totalContract = ref(0);
const contractRato = ref(0);
const totalWorker = ref(0);
const totalContractExpiry = ref(0);

const numAdd = function (max: number, totalCount: any) {
  // 动画间隔
  let rate = 30;
  // 总时长
  let time = 1000;
  let step = max / (time / rate);
  if (totalCount.value < max) {
    totalCount.value += step;
    setTimeout(() => {
      numAdd(max, totalCount);
    }, 30);
  } else {
    totalCount.value = max;
  }
};
numAdd(1138, totalContract);
numAdd(85, contractRato);
numAdd(3256, totalWorker);
numAdd(4592, totalContractExpiry);

const initChart = () => {
  const wageChart = echarts.init(document.getElementById("wageChart") as HTMLDivElement);
  const contractStatisticChart = echarts.init(document.getElementById("contractStatisticChart") as HTMLDivElement);
  const contractTypeChart = echarts.init(document.getElementById("contractTypeChart") as HTMLDivElement);
  const contractChart = echarts.init(document.getElementById("contractChart") as HTMLDivElement);

  //工资计算方式分析
  wageChart.setOption({
    title: {
      text: "工资计算方式分析",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    grid: {
      top: "16%",
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: ["其他", "计件", "按小时", "按日", "按周", "按月"],
    },
    series: [
      {
        data: [100, 111, 150, 60, 64, 100],
        type: "bar",
        itemStyle: {
          color: "#3198ff",
        },
        label: {
          show: true,
          position: "right",
          color: "#3198ff",
          fontSize: 12,
        },
      },
    ],
  });
  //合同签订统计
  contractStatisticChart.setOption({
    title: {
      text: "合同签订统计",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    legend: {
      orient: "vertical",
      right: "0",
      top: "35%",
      align: "right",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "80%",
        data: [
          { value: 150, name: "已签订", itemStyle: { color: "#3198ff" } },
          { value: 100, name: "未签订", itemStyle: { color: "#68bbc4" } },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
  //合同签订类型分析
  contractTypeChart.setOption({
    title: {
      text: "合同签订类型分析",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    legend: {
      orient: "vertical",
      right: "0",
      top: "35%",
      align: "right",
    },

    series: [
      {
        name: "Access From",
        type: "pie",
        left: "-30%",
        radius: "50%",
        data: [
          { value: 100, name: "固定期限劳动合同" },
          { value: 150, name: "无固定期限劳动合同" },
          { value: 189, name: "以完成一定工作任务为期限的劳动合同" },
          { value: 202, name: "劳务派遣合同" },
          { value: 176, name: "其他" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        label: {
          show: true,
          width: 50,
        },
      },
    ],
  });
  //合同签订(按月统计)
  contractChart.setOption({
    title: {
      text: "合同签订(按月统计)",
      left: "left",
      top: "0%",
      textStyle: {
        color: "#000",
        fontSize: "14",
      },
    },
    grid: {
      top: "16%",
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [100, 111, 150, 60, 64, 100, 200, 50, 169, 120, 136, 110],
        type: "bar",
        barWidth: 30,
        itemStyle: {
          color: "#3198ff",
        },
        label: {
          show: true,
          position: "top",
          color: "#3198ff",
          fontSize: 12,
        },
      },
    ],
  });

  window.addEventListener("resize", () => {
    wageChart.resize();
    contractStatisticChart.resize();
    contractTypeChart.resize();
    contractChart.resize();
  });
};

onMounted(() => {
  initChart();
});
</script>

<style lang="less" scoped>
:deep(.el-col) {
  padding-bottom: 15px;
}
:deep(.el-main) {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
}
:deep(.el-card) {
  border-radius: 0;
  padding-left: 5px;
  padding-right: 5px;
}

:deep(.el-statistic__number) {
  font-size: 16px;
}
.statistic-totalcontract {
  background-color: #f5fef2;
}
.statistic-contractsigning {
  background-color: #f2f9fe;
}
.statistic-totalworker {
  background-color: #f6f6ff;
}
.statistic-contractexpiry {
  background-color: #f2f9fe;
}
.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  color: var(--el-text-color-regular);
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.statistic-footer .footer-item .red {
  color: red;
  margin-left: 5px;
}

.statistic-footer .footer-item span {
  font-size: 11px;
}
.image-col {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
}
.static-col {
  display: inline-flex;
  align-items: center;
}
</style>
